<template>
  <div class="test-paper-container">
    <div class="test-paper-header">
      <div class="paper-name">{{ data.testPaperData.paperName }}</div>
      <div class="course-teacher-info">
        <span>课程名称：{{ data.testPaperData.courseName }}</span>
        <span>授课教师：{{ data.testPaperData.teacherName }}</span>
        <span>小测时间：{{ data.testPaperData.durationMinutes }} 分钟</span>
      </div>
    </div>
    <div class="countdown-timer">
      小测倒计时：{{ data.hour }} 时：{{ data.minutes }} 分：{{ data.seconds }} 秒
    </div>
    <div class="questions-container">
      <div v-for="(item, index) in data.testPaperData.questionRespDTOs" :key="item.id" class="question-item">
        <div class="question-header">
          {{ index + 1 }}. {{ item.questionStem }}（{{ item.score }} 分）[ {{ item.typeName }}]
        </div>

        <!-- 图片展示 -->
        <div v-if="item.questionImg && item.questionImg.length > 0" class="question-images">
          <el-image
              v-for="(imgUrl, imgIndex) in item.questionImg"
              :key="imgIndex"
              :src="imgUrl"
              fit="contain"
              style="width: 150px; height: 150px; margin-right: 10px; cursor: pointer;"
              @click="handleImageClick(imgUrl)"
          />
        </div>

        <!-- 单选题 -->
        <div v-if="item.typeId === 1" class="question-body">
          <el-radio-group v-model="item.newAnswer">
            <el-radio v-for="(option, optionIndex) in item.options" :key="option.id" :label="option.optionLabel">
              {{ option.optionLabel }}. {{ option.optionValue }}
            </el-radio>
          </el-radio-group>
        </div>

        <!-- 多选题 -->
        <div v-if="item.typeId === 2" class="question-body">
          <el-checkbox-group v-model="item.newAnswer">
            <el-checkbox v-for="(option, optionIndex) in item.options" :key="option.id" :label="option.optionLabel">
              {{ option.optionLabel }}. {{ option.optionValue }}
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <!-- 判断题 -->
        <div v-if="item.typeId === 3" class="question-body">
          <el-radio-group v-model="item.newAnswer">
            <el-radio v-for="(option, optionIndex) in item.options" :key="option.id" :label="option.optionLabel">
              {{ option.optionLabel }}. {{ option.optionValue }}
            </el-radio>
          </el-radio-group>
        </div>

        <!-- 填空题 -->
        <div v-if="item.typeId === 4" class="question-body">
          <el-input style="width: 50%" v-model="item.newAnswer" placeholder="请输入您的答案" class="input-box"></el-input>
        </div>

        <!-- 简答题 -->
        <div v-if="item.typeId === 5" class="question-body">
          <el-input type="textarea" :rows="8" v-model="item.newAnswer" placeholder="请输入您的答案"
                    class="input-box"></el-input>
        </div>
      </div>

      <div class="submit-btn-container">
        <el-button class="submit-btn" type="primary" @click="submitPaper">提交试卷</el-button>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-image-viewer
        v-if="data.imageViewerVisible"
        :url-list="[data.currentImageUrl]"
        @close="data.imageViewerVisible = false"
    />
  </div>
</template>

<script setup>
import {reactive, onMounted} from "vue";
import request from "@/utils/request.js";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

const data = reactive({
  paperId: router.currentRoute.value.query.id,
  testPaperData: {},
  hour: 0,
  minutes: 0,
  seconds: 0,
  imageViewerVisible: false,
  currentImageUrl: '',
});

let time;
const loadTestPaper = () => {
  data.paperId = router.currentRoute.value.query.id;
  request.get('/testPaper/selectById/' + data.paperId).then(res => {
    if (res.code === '200') {
      data.testPaperData = res.data;
      let maxTime = data.testPaperData.durationMinutes * 60; // Convert to seconds
      time = setInterval(() => {
        if (maxTime >= 0) {
          let remain = Math.floor(maxTime % 3600);
          data.hour = Math.floor(maxTime / 3600);
          data.minutes = Math.floor(remain / 60);
          data.seconds = Math.floor(remain % 60);
          maxTime--;
        } else {
          ElMessage.error('时间到');
          submitPaper();
        }
      }, 1000);
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const submitPaper = () => {
  clearInterval(time);
  const answers = data.testPaperData.questionRespDTOs.map(item => ({
    id: item.id,
    answer: item.newAnswer,
  }));

  const submitData = {
    paperId: data.testPaperData.id,
    answers: answers,
  };

  request.post('/score/add', submitData).then(res => {
    if (res.code === '200') {
      ElMessage.success('提交成功');
      setTimeout(() => {
        location.href = '/front/score';
      }, 500);
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const handleImageClick = (imgUrl) => {
  data.currentImageUrl = imgUrl;
  data.imageViewerVisible = true;
};

onMounted(() => {
  loadTestPaper();
});
</script>

<style scoped>
.test-paper-container {
  width: 80%;
  margin: 30px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #ffffff;
  padding: 30px;
}

.test-paper-header {
  text-align: center;
  margin-bottom: 30px;
}

.paper-name {
  font-size: 28px;
  font-weight: bold;
  color: #333333;
}

.course-teacher-info {
  color: #7f8c8d;
  font-size: 18px;
  line-height: 1.5;
}

.countdown-timer {
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
  color: #e74c3c;
  font-weight: bold;
}

.questions-container {
  margin-top: 50px;
}

.question-item {
  margin-bottom: 30px;
  padding: 20px;
  border-bottom: 1px solid #eeeeee;
}

.question-header {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 15px;
}

.question-body {
  margin-bottom: 20px;
}

.input-box {
  width: 100%;
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-size: 16px;
  margin-top: 10px;
}

.submit-btn-container {
  text-align: center;
  margin-top: 50px;
}

.submit-btn {
  padding: 12px 36px;
  font-size: 18px;
  font-weight: bold;
  background-color: #409EFF;
  color: white;
  border-radius: 4px;
  box-shadow: none;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #66b1ff;
}

.el-radio-group,
.el-checkbox-group {
  display: block;
}

.el-radio,
.el-checkbox {
  display: block;
  margin-bottom: 8px;
}

.question-images {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
</style>



